<template>
    <div :style="mainStyle">
        <navigation-bar :title="title" :onLeftButtonClick="function(){
        toBack()}" :rightIcon="' '"></navigation-bar>
        <list class="text_question" :style="webStyle">
            <cell v-for="(question , index) in list">
                <div class="question-box">
                    <div class="subject-title">
                        <text>({{index +1}}/{{count}})</text>
                        <text>{{question.questision}}</text>
                    </div>
                    <div v-if="task.status === 'ready'">
                        <div class="subject-question" v-if="question.type === 'judge'">
                            <wxc-radio :list="question.list"
                                       @wxcRadioListChecked="params => answering(index, params)"></wxc-radio>
                        </div>
                        <div class="subject-question" v-if="question.type === 'radio'">
                            <wxc-radio :list="question.list"
                                       @wxcRadioListChecked="params => answering(index, params)"></wxc-radio>
                        </div>
                        <div class="subject-question" v-if="question.type === 'checkbox'">
                            <wxc-checkbox-list :list="question.list"
                                               @wxcCheckBoxListChecked="params => checkAnswering(index, params)"></wxc-checkbox-list>
                        </div>
                        <div class="put-task" v-if="question.type === 'answer'">
                            <wxc-button text="上传图片答案" type="red"
                                        :btn-style="{width:'316px', margin:'0px',height:'70px',borderRadius:'36px', backgroundColor: '#00BB9A'}"
                                        @wxcButtonClicked="uploadImg"></wxc-button>
                        </div>
                    </div>
                </div>
                <div class="question-answer" v-if="task.status === 'pigai' && question.type !== 'answer'">
                    <div class="answer-list" v-if="question.type === 'judge'">
                        <text>我的答案：</text>
                        <text style="color:#FF0000" v-if="question.answer_desc == 0">错误</text>
                        <text style="color:#FF0000" v-else>正确</text>
                    </div>
                    <div class="answer-list" v-if="question.type === 'radio'">
                        <text>我的答案：</text>
                        <text style="color:#FF0000">{{String.fromCharCode(65+question.answer_desc)}}</text>
                    </div>
                    <div class="answer-list" v-if="question.type === 'checkbox'">
                        <text>我的答案：</text>
                        <text style="color:#FF0000" v-for="item in question.answer_desc">{{String.fromCharCode(65+item)}}</text>
                    </div>
                    <!--<div class="answer-list">-->
                        <!--<text>正确答案</text>-->
                    <!--</div>-->

                    <div class="answer-list" v-if="question.type === 'judge'">
                        <text>正确答案：</text>
                        <text style="color:#00BB9A" v-if="question.standard_answer == 0">错误</text>
                        <text style="color:#00BB9A" v-else>正确</text>
                    </div>
                    <div class="answer-list" v-if="question.type === 'radio'">
                        <text>正确答案：</text>
                        <text style="color:#00BB9A">{{String.fromCharCode(65+question.standard_answer)}}</text>
                    </div>
                    <div class="answer-list" v-if="question.type === 'checkbox'">
                        <text>正确答案：</text>
                        <text style="color:#00BB9A" v-for="item in question.standard_answer">{{String.fromCharCode(65+item)}}</text>
                    </div>
                </div>
                <div class="teacher-jiexi" v-if="task.status === 'pigai'">
                    <image style="height: 300px ;width: 300px;" :src="imageUrl"></image>
                    <text class="jiexi-desc" v-if="question.teacher_reply">解析：</text>
                    <text class="jiexi-desc">{{question.teacher_reply}}</text>
                </div>
            </cell>
            <cell v-if="task.status === 'ready'">
                <div class="put-task">
                    <wxc-button text="提交作业" type="red"
                                :btn-style="{width:'316px', margin:'0px',height:'70px',borderRadius:'36px', backgroundColor: '#00BB9A'}"
                                @wxcButtonClicked="putTask"
                    ></wxc-button>
                </div>
            </cell>
        </list>
    </div>
</template>
<style scoped>
    .text_question {
        width: 750px;
        height: 1234px;
        align-items: center;
        background-color: #ffffff;
    }

    .subject-title {
        width: 750px;
        height: 160px;
        background-color: #EEEEEE;
        padding: 30px;
    }

    .subject-question {
        width: 750px;
    }

    .put-task {
        width: 750px;
        height: 250px;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .question-answer {
        margin-top: 30px;
        background-color: #e1f0f4;
        width: 750px;
        height: 127px;
        padding: 25px
    }

    .answer-list {
        flex-direction: row;
        align-items: center;
    }

    .teacher-jiexi {
        background-color: #EEEEEE;
        margin: 30px;
        padding: 30px;
    }

    .jiexi-desc {
        color: #000000;
    }
</style>

<script>
  import NavigationBar from './widget/NavigationBar.vue'
  import { getEntryPageStyle } from '../config/Config'
  import { Utils, WxcButton, WxcRadio, WxcCheckboxList } from 'weex-ui'
  import task from '../core/net/task'

  const modal = weex.requireModule('modal')
  const ImagePicker =weex.requireModule('imagePicker');
  const options = {
      title: '请选择照片',
      customButtons: [
          {name: 'fb', title: '选择照片'},
      ],
      storageOptions: {
          skipBackup: true,
          path: 'images'
      }
  };
  export default {
    components: {
      NavigationBar,
      WxcButton,
      WxcRadio,
      WxcCheckboxList,
    },
    data: () => {
      return {
        taskId: '',
        imageUrl: '',
        title: '',
        isBottomShow: false,
        list: [
          {questision: ''},
        ],
        task: 0,
        count: 0,
        config: {
          checkedIcon: 'http://cdn.www.bright-tech.cn/PeiYouCe/31ab1304f4eaecef3e7ca68099691/hH0Uxdjsa0LxggssT265cFJEwGhL8DOM4mKjjDwv.png',
          checkedColor: '#000000',
        },
        webStyle: {height: '1334px', width: '750px'},
      }
    },
    methods: {
      init () {
        this.getQuestions()
      },
      getQuestions () {
        task.getTaskDesc(this.taskId).then((res) => {
          this.list = res.data.subjectItems
          this.task = res.data
          this.count = this.list.length
        })
      },
      answering (index, ele) {
        this.task.subjectItems[index].answer_desc = ele.value
      },
      checkAnswering (index, ele) {
        this.task.subjectItems[index].answer_desc = ele.checkedList
      },
      putTask () {
        let num = 0
        this.task.subjectItems.forEach((item) => {
          if (item.type !== 'answer' && !item.answer_desc) {
            num++
          } else if (item.type === 'answer' && !item.answer_resources) {
            num++
          }
        })
      if(num === 0){
        this.submitTask()
      }else{
        modal.toast({
          message: '请填写完整',
        })
      }
      },
      submitTask () {
        task.submitTask(this.taskId, this.task).then((res) => {
          if (res.result) {
            this.toBack()
          } else {
            modal.toast({
              message: res.data,
            })
          }

        })
      },
        uploadImg () {
            ImagePicker.launchCamera(options, (response)  => {
                modal.toast({
                    message: response.uri + '\n' + response.path
                });
            });
        }
    },
    created () {
      this.taskId = this.getQuery().task
      this.title = this.getQuery().title
      this.mainStyle = getEntryPageStyle(Utils)
      this.init()
    },
    computed: {
      // question () {
      //   if(this.list.length > 0 ){
      //     return this.list[this.onSubject]
      //   }
      // },
    },
  }
</script>
